<template>
	<view class="login__wrapper">
		<view class="login__top">			
			<image class="login__top__bg" src="../../static/images/5290ff.png"></image>
			<image class="login__top__logo" src="/static/images/logo.png"></image>
		</view>
		
		<u-form class="login__box" >
			<u-form-item>
				<u-input placeholder="请输入注册后用户名" v-model="info.username" :clearable="false">用户名</u-input>
			</u-form-item>
			<u-form-item>
				<u-input placeholder="请输入密码" v-model="info.password1" type="password" :clearable="false">密码</u-input>
			</u-form-item>
			<u-form-item>
				<u-input placeholder="请再次输入密码" v-model="info.password2" type="password" :clearable="false">密码</u-input>
			</u-form-item>
			<u-form-item>
				<u-input placeholder="请输入手机号" v-model="info.phone" type="password" :clearable="false">密码</u-input>
			</u-form-item>
			
			<view class="sendCodeBtn" @click="sendCodeBtn">
					{{send?'点击发送验证码':second+'s重新发送'}}
			</view>
			
			<u-form-item>
				<u-input placeholder="请输入验证码" v-model="info.code" type="password" :clearable="false">密码</u-input>
			</u-form-item>
			
			
			<u-button type="primary" @click="register()" text="注册"></u-button><u-loading-icon :show="showLoading"></u-loading-icon>

		</u-form>
		
		<view class="login__bottom">
			<text>康飞恩信息技术有限公司</text>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				info:{
					username:"",
					password1:"",
					password2:"",
					phone:"",
					code:""
				},
				showLoading: false,
				s: 60,	//默认倒计时
				second: 0,
				send: true //按钮可以点击
			}
		},
		onLoad() {
		},
		methods: {
			register(){
				console.log(this.info)
				request({
					url: "prod-api/system/app/register",
					method: "post",
					data:{
						againPassword:this.info.password2,
						password: this.info.password1,
						phone: this.info.phone,
						phoneCode: this.info.code,
						username: this.info.username
					}
				}).then((res)=>{
					console.log(res)
					if(res.code<300){
						uni.navigateTo({
							url:"login"
						})
					}
				})
			},
		
			// 发送验证码
			sendCodeBtn: function() {
				let that = this;
				// 防止多次重复点击
				if(!that.send){
					return false;
				}
				request({
					url: `prod-api/notice/sms/register-code/${this.info.phone}`,
					method: "get",
					data:{
					}
				})
				// 发送验证码
				that.send = false;
				uni.showToast({
					title:'发送成功',
					icon:'none',
					success: () => {
						this.time();	// 倒计时
					}
				})
			},
			// 倒计时
			time(){
				let that = this;
				that.second = that.s;
				let interval = setInterval(function(){
					if(that.second == 1){
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					}else {
						that.second--;
					}
				},1000)
			}
			
		},	
	}
</script>

<style lang="scss">
	.login__wrapper{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		overflow: hidden;
		.login__top {
			position: relative;
			width: 100vw;
			height: 400rpx;
		}
		.login__top__bg {
			width: 100vw;
			height: 400rpx;
		}
		.login__top__logo {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 180rpx;
			width: 180rpx;
			border-radius: 50%;
		}
		.login__box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-39%);
			display: flex;
			flex-direction: column;
			width: 70vw;
			padding: 0 100rpx 0 100rpx;
			.sendCodeBtn{
				width: 300upx;
				height: 60upx;
				line-height: 60upx;
				border: 1px solid #5290ff;
				box-sizing: border-box;
				padding-left: 20upx;
				color: yellow;
				background-color: #5290ff;
				border-radius: 5%;
			}
			.login__box__button {
				width: 100%;
				height: 80rpx;
				background-color: #5290ff;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				margin-top: 100rpx;
			}
		}
		.login__bottom {
			width: 100vw;
			position: absolute;
			bottom: 60rpx;
			margin: auto;
			text-align: center;
			color: #9F9F9F;
		}
		.loading {
			position: relative;
			right: 15rpx;
		}
		.privacy {
			margin-top: 30rpx;
			text-align: center;
			.agreement {
				color: #5290ff;
				margin-left: 2px;
			}
		}
	}
</style>
